<template>
  <div class="flow-container">
    <div class="forum-edit-layout">
      <!-- 侧边栏 Markdown 语法提示 -->
      <div class="markdown-guide">
        <div class="guide-header">
          <svg class="guide-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
          </svg>
          <h4>Markdown 语法</h4>
        </div>
        <div class="guide-content">
          <div class="syntax-item">
            <span class="syntax-symbol">#</span>
            <span class="syntax-desc">标题</span>
          </div>
          <div class="syntax-item">
            <span class="syntax-symbol">**</span>
            <span class="syntax-desc">加粗</span>
          </div>
          <div class="syntax-item">
            <span class="syntax-symbol">*</span>
            <span class="syntax-desc">斜体</span>
          </div>
          <div class="syntax-item">
            <span class="syntax-symbol">`</span>
            <span class="syntax-desc">代码</span>
          </div>
          <div class="syntax-item">
            <span class="syntax-symbol">></span>
            <span class="syntax-desc">引用</span>
          </div>
          <div class="syntax-item">
            <span class="syntax-symbol">-</span>
            <span class="syntax-desc">列表</span>
          </div>
          <div class="syntax-item">
            <span class="syntax-symbol">[]()</span>
            <span class="syntax-desc">链接</span>
          </div>
          <div class="syntax-item">
            <span class="syntax-symbol">![]()</span>
            <span class="syntax-desc">图片</span>
          </div>
        </div>
        <div class="guide-tip">
          <svg class="tip-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"/>
          </svg>
          <span>使用工具栏快速插入</span>
        </div>
      </div>

      <div class="editor-panel">
        <div class="edit-header">
          <div class="header-left">
            <svg class="create-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"/>
            </svg>
            <h3>编辑帖子</h3>
          </div>
          <div class="header-actions">
            <el-upload
              class="upload-btn"
              action="#"
              :auto-upload="false"
              :on-change="handleFileChange"
              :file-list="fileList"
              multiple
              :show-file-list="false"
            >
              <el-button class="action-btn upload-btn-inner" type="info" plain size="small">
                <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                </svg>
                上传文件
              </el-button>
            </el-upload>
            <el-button class="action-btn save-btn" type="primary" @click="savePost" size="small">
              <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"/>
              </svg>
              保存修改
            </el-button>
          </div>
        </div>

        <!-- 表单输入区域 -->
        <div class="form-section">
          <div class="input-group">
            <label class="input-label">
              <svg class="label-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M5,4V7H10.5V19H13.5V7H19V4H5Z"/>
              </svg>
              帖子标题
            </label>
            <el-input
              v-model="title"
              placeholder="为你的帖子起一个吸引人的标题..."
              class="edit-title"
              maxlength="60"
              show-word-limit
            />
          </div>
        </div>

        <!-- Markdown 工具栏 -->
        <div class="markdown-toolbar">
          <div class="toolbar-section">
            <span class="section-label">格式</span>
            <div class="toolbar-buttons">
              <el-button size="small" @click="() => insertMarkdown('bold')" class="toolbar-btn" title="加粗 (Ctrl+B)">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M10,6.5H13A1.5,1.5 0 0,1 14.5,8A1.5,1.5 0 0,1 13,9.5H10M15.6,10.79C16.57,10.11 17.25,9.02 17.25,8C17.25,5.74 15.5,4 13.25,4H7V18H14.04C16.14,18 17.75,16.3 17.75,14.21C17.75,12.69 16.89,11.39 15.6,10.79Z"/>
                </svg>
              </el-button>
              <el-button size="small" @click="() => insertMarkdown('italic')" class="toolbar-btn" title="斜体 (Ctrl+I)">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z"/>
                </svg>
              </el-button>
              <el-button size="small" @click="() => insertMarkdown('title')" class="toolbar-btn" title="标题">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M5,4V7H10.5V19H13.5V7H19V4H5Z"/>
                </svg>
              </el-button>
            </div>
          </div>
          <div class="toolbar-section">
            <span class="section-label">插入</span>
            <div class="toolbar-buttons">
              <el-button size="small" @click="() => insertMarkdown('link')" class="toolbar-btn" title="链接">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"/>
                </svg>
              </el-button>
              <el-button size="small" @click="() => insertMarkdown('code')" class="toolbar-btn" title="代码块">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"/>
                </svg>
              </el-button>
              <el-button size="small" @click="() => insertMarkdown('image')" class="toolbar-btn" title="图片">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z"/>
                </svg>
              </el-button>
            </div>
          </div>
          <div class="toolbar-section">
            <span class="section-label">列表</span>
            <div class="toolbar-buttons">
              <el-button size="small" @click="() => insertMarkdown('ul')" class="toolbar-btn" title="无序列表">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z"/>
                </svg>
              </el-button>
              <el-button size="small" @click="() => insertMarkdown('ol')" class="toolbar-btn" title="有序列表">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M7,13V11H21V13H7M7,19V17H21V19H7M7,7V5H21V7H7M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M4.25,10A0.75,0.75 0 0,1 5,10.75C5,10.95 4.92,11.14 4.79,11.27L3.12,13H5V14H2V13.08L4,11H2V10H4.25Z"/>
                </svg>
              </el-button>
              <el-button size="small" @click="() => insertMarkdown('quote')" class="toolbar-btn" title="引用">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z"/>
                </svg>
              </el-button>
            </div>
          </div>
          <div class="toolbar-section">
            <span class="section-label">其他</span>
            <div class="toolbar-buttons">
              <el-button size="small" @click="() => insertMarkdown('table')" class="toolbar-btn" title="表格">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M5,4H19A2,2 0 0,1 21,6V18A2,2 0 0,1 19,20H5A2,2 0 0,1 3,18V6A2,2 0 0,1 5,4M5,8V12H11V8H5M13,8V12H19V8H13M5,14V18H11V14H5M13,14V18H19V14H13Z"/>
                </svg>
              </el-button>
              <el-button size="small" @click="() => insertMarkdown('hr')" class="toolbar-btn" title="分割线">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M19,13H5V11H19V13Z"/>
                </svg>
              </el-button>
            </div>
          </div>
        </div>

        <!-- 编辑器区域 -->
        <div class="editor-container">
          <div class="editor-header">
            <span class="editor-label">
              <svg class="editor-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"/>
              </svg>
              Markdown 编辑
            </span>
            <div class="editor-actions">
              <span class="word-count">字数: {{ markdown.length }}</span>
            </div>
          </div>
          <el-input
            v-model="markdown"
            type="textarea"
            autosize
            placeholder="在这里使用 Markdown 语法编写你的内容..."
            class="edit-markdown"
            ref="markdownInputRef"
            @keydown.native="handleTabKey"
          />
        </div>
      </div>

      <div class="preview-panel">
        <div class="preview-header">
          <svg class="preview-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"/>
          </svg>
          <h2>{{ title || '预览标题' }}</h2>
        </div>
        <div class="preview-content">
          <MarkdownPreview :markdown="markdown" />
        </div>
        <div class="attachment-preview">
          <div v-for="file in fileList" :key="file.uid" class="file-item">
            <img v-if="isImage(file)" :src="file.url" class="preview-img" />
            <div v-else-if="isDoc(file)" class="doc-preview">
              <svg class="doc-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"/>
              </svg>
              <span>{{ file.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue'
import { ElInput, ElButton, ElUpload, ElMessage } from 'element-plus'
import MarkdownPreview from '../../components/MarkdownPreview.vue'
import { getPostById, updatePost } from '../../api/forum'
import { useRoute, useRouter } from 'vue-router'

const title = ref('')
const markdown = ref('')
const fileList = ref<any[]>([])
const markdownInputRef = ref()
const route = useRoute()
const router = useRouter()
const id = route.params.id
const state = ref('')

// 只处理编辑已有帖子
onMounted(async () => {
    try {
      const res = await getPostById(Number(id))
      title.value = res.data?.title || ''
      markdown.value = res.data?.content || ''
      state.value = res.data?.status || 0
    } catch (e) {
      ElMessage.error('获取帖子内容失败')
    }
})

function handleFileChange(file: any, fileListRaw: any[]) {
  // 生成本地预览链接
  if (file.raw && isImage(file)) {
    file.url = URL.createObjectURL(file.raw)
  }
  fileList.value = fileListRaw
}

function isImage(file: any) {
  return file.raw && file.raw.type.startsWith('image/')
}
function isDoc(file: any) {
  return file.raw && (file.raw.type === 'application/msword' || file.raw.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')
}

async function savePost() {
  if (!title.value.trim() || !markdown.value.trim()) {
    ElMessage.error('标题和内容不能为空')
    return
  }
  try {
    await updatePost({ id: Number(id), title: title.value, content: markdown.value ,status: Number(state.value)})
    ElMessage.success('保存成功')
    // 通知父页面刷新并关闭当前标签页
    if (window.opener) {
      window.opener.postMessage({ type: 'refresh-forum-manager' }, '*')
    }
    window.close()
  } catch (e) {
    ElMessage.error('保存失败')
  }
}

function insertMarkdown(type: string) {
  // 兼容 Element Plus textarea 组件
  const input = markdownInputRef.value?.textarea || markdownInputRef.value?.$el?.querySelector('textarea')
  if (!input) return
  const start = input.selectionStart
  const end = input.selectionEnd
  let before = markdown.value.slice(0, start)
  let after = markdown.value.slice(end)
  let selected = markdown.value.slice(start, end)
  let insertText = ''
  let cursorOffset = 0
  switch (type) {
    case 'bold':
      insertText = `**${selected || '加粗文字'}**`
      cursorOffset = selected ? 0 : 2
      break
    case 'italic':
      insertText = `*${selected || '斜体文字'}*`
      cursorOffset = selected ? 0 : 1
      break
    case 'title':
      insertText = `# ${selected || '一级标题'}`
      cursorOffset = selected ? 0 : 2
      break
    case 'link':
      insertText = `[${selected || '链接文本'}](url)`
      cursorOffset = selected ? 0 : 1
      break
    case 'code':
      insertText = selected.includes('\n') ? `\n\n\`\`\`\n${selected || '代码块'}\n\`\`\`\n\n` : `\`${selected || '代码'}\``
      cursorOffset = selected ? 0 : 4
      break
    case 'ul':
      insertText = selected ? selected.split('\n').map(line => `- ${line}`).join('\n') : '- 列表项1\n- 列表项2'
      cursorOffset = selected ? 0 : 4
      break
    case 'ol':
      insertText = selected ? selected.split('\n').map((line, i) => `${i + 1}. ${line}`).join('\n') : '1. 列表项1\n2. 列表项2'
      cursorOffset = selected ? 0 : 4
      break
    case 'quote':
      insertText = selected ? selected.split('\n').map(line => `> ${line}`).join('\n') : '> 引用内容'
      cursorOffset = selected ? 0 : 3
      break
    case 'hr':
      insertText = '\n---\n'
      cursorOffset = 5
      break
    case 'table':
      insertText = '\n| 表头1 | 表头2 |\n| --- | --- |\n| 内容1 | 内容2 |\n'
      cursorOffset = 0
      break
    case 'image':
      insertText = `![${selected || '图片描述'}](url)`
      cursorOffset = selected ? 0 : 2
      break
    default:
      break
  }
  markdown.value = before + insertText + after
  nextTick(() => {
    // 重新聚焦并设置光标
    input.focus()
    const pos = before.length + (selected ? insertText.length : cursorOffset)
    input.setSelectionRange(pos, pos)
  })
}

function handleTabKey(e: Event | KeyboardEvent) {
  // 只处理 textarea
  const input = markdownInputRef.value?.textarea || markdownInputRef.value?.$el?.querySelector('textarea')
  // 兼容 Event 和 KeyboardEvent
  const event = e as KeyboardEvent
  if (event.key === 'Tab' && input && document.activeElement === input) {
    event.preventDefault()
    const start = input.selectionStart
    const end = input.selectionEnd
    const value = markdown.value
    markdown.value = value.substring(0, start) + '\t' + value.substring(end)
    nextTick(() => {
      input.focus()
      input.setSelectionRange(start + 1, start + 1)
    })
  }
}
</script>

<style scoped>
/* 主容器布局 */
.forum-edit-layout {
  display: grid;
  grid-template-columns: 1fr 4fr 4fr; /* 修改为1:3:3比例 */
  gap: 20px;
  padding: 0 20px;
  background: transparent;
  border-radius: 18px;
  min-height: 80vh;
  box-shadow: none;
}

/* Markdown 语法提示侧边栏 */
.markdown-guide {
  flex:0.5;
  min-width: 100px;
  max-width: 220px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(90, 80, 200, 0.12);
  border: 1px solid rgba(90, 80, 200, 0.08);
  padding: 20px;
  height: fit-content;
  backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.markdown-guide:hover {
  box-shadow: 0 8px 32px rgba(90, 80, 200, 0.18);
  border-color: rgba(90, 80, 200, 0.15);
}

.guide-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(90, 80, 200, 0.1);
}

.guide-icon {
  width: 20px;
  height: 20px;
  color: #667eea;
}

.guide-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.syntax-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.syntax-item:hover {
  background: rgba(102, 126, 234, 0.05);
}

.syntax-symbol {
  font-family: 'Consolas', 'Monaco', monospace;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}

.syntax-desc {
  font-size: 14px;
  color: #5a6c7d;
}

.guide-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 8px;
  border-left: 3px solid #667eea;
}

.tip-icon {
  width: 16px;
  height: 16px;
  color: #667eea;
}

.guide-tip span {
  font-size: 13px;
  color: #667eea;
}

/* 编辑器面板 */
.editor-panel {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(90, 80, 200, 0.10);
  padding: 28px 24px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(90, 80, 200, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.editor-panel:hover {
  box-shadow: 0 8px 32px rgba(90, 80, 200, 0.15);
  border-color: rgba(90, 80, 200, 0.12);
}

/* 头部区域 */
.edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.create-icon {
  width: 24px;
  height: 24px;
  color: #667eea;
}

.edit-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-icon {
  width: 16px;
  height: 16px;
}

.upload-btn-inner {
  border-color: #e0e6ed;
  color: #5a6c7d;
}

.upload-btn-inner:hover {
  background: rgba(102, 126, 234, 0.05);
  border-color: #667eea;
  color: #667eea;
}

.save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
}

.save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 表单区域 */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

.label-icon {
  width: 16px;
  height: 16px;
  color: #667eea;
}

.edit-title :deep(.el-input__wrapper) {
  border-radius: 10px;
  border: 1px solid rgba(90, 80, 200, 0.15);
  transition: all 0.3s ease;
  box-shadow: none;
}

.edit-title :deep(.el-input__wrapper:hover) {
  border-color: #667eea;
}

.edit-title :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Markdown 工具栏 */
.markdown-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  background: rgba(102, 126, 234, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.08);
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  color: #667eea;
  margin-right: 4px;
}

.toolbar-buttons {
  display: flex;
  gap: 4px;
}

.toolbar-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(90, 80, 200, 0.15);
  border-radius: 8px;
  background: white;
  color: #5a6c7d;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.toolbar-btn svg {
  width: 16px;
  height: 16px;
}

.toolbar-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-1px);
}

/* 编辑器容器 */
.editor-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.editor-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

.editor-icon {
  width: 16px;
  height: 16px;
  color: #667eea;
}

.editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.word-count {
  font-size: 12px;
  color: #8492a6;
}

.edit-markdown {
  font-size: 15px;
}

.edit-markdown :deep(.el-textarea__inner) {
  border: 1px solid rgba(90, 80, 200, 0.15) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: 'Consolas', 'Monaco', monospace;
  line-height: 1.6;
  min-height: 300px;
}

.edit-markdown :deep(.el-textarea__inner:hover) {
  border-color: #667eea !important;
}

.edit-markdown :deep(.el-textarea__inner:focus) {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* 预览面板 */
.preview-panel {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(90, 80, 200, 0.10);
  border: 1px solid rgba(90, 80, 200, 0.08);
  padding: 24px;
  overflow-y: auto;
  backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-panel:hover {
  box-shadow: 0 8px 32px rgba(90, 80, 200, 0.15);
  border-color: rgba(90, 80, 200, 0.12);
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(90, 80, 200, 0.1);
}

.preview-icon {
  width: 20px;
  height: 20px;
  color: #667eea;
}

.preview-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.preview-content {
  min-height: 400px;
}

/* 附件预览 */
.attachment-preview {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(90, 80, 200, 0.1);
}

.preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(90, 80, 200, 0.15);
  transition: all 0.3s ease;
}

.preview-img:hover {
  border-color: #667eea;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.doc-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid rgba(90, 80, 200, 0.15);
  transition: all 0.3s ease;
}

.doc-preview:hover {
  background: rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.doc-icon {
  width: 18px;
  height: 18px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .forum-edit-layout {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  
  .markdown-guide {
    display: none;
  }
}

@media (max-width: 768px) {
  .forum-edit-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 10px;
  }
  
  .edit-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .header-actions {
    justify-content: flex-end;
  }
  
  .markdown-toolbar {
    flex-direction: column;
    gap: 12px;
  }
  
  .toolbar-section {
    justify-content: flex-start;
  }
}
</style>
